Micron Document
`:top
`!JSX`! (sometimes referred to as `!JavaScript XML`!) is an `F33f`_`[XML`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=XML]`_`f-like extension to the `F33f`_`[JavaScript`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=JavaScript]`_`f language syntax.`:cite-ref-0-1-0[`F5bf`_`[1`#cite-note-0-1]`_`f] Initially created by `F33f`_`[Facebook`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Meta_Platforms]`_`f for use with `F33f`_`[React`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=React_(JavaScript_library)]`_`f, JSX has been adopted by multiple `F33f`_`[web frameworks`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Web_framework]`_`f.`:cite-ref-larsen-2-0[`F5bf`_`[2`#cite-note-larsen-2]`_`f]`:cite-ref-wieruch-3-0[`F5bf`_`[3`#cite-note-wieruch-3]`_`f] Being a `F33f`_`[syntactic sugar`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Syntactic_sugar]`_`f, JSX is generally `F33f`_`[transpiled`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Transpiler]`_`f into nested JavaScript function calls structurally similar to the original JSX.

When used with `F33f`_`[TypeScript`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=TypeScript]`_`f, the file extension is `*.tsx`*.`:cite-ref-4[`F5bf`_`[4`#cite-note-4]`_`f]

>>Contents

• `F0af`_`[Markup`#markup]`_`f
• `F0af`_`[Nested elements`#nested-elements]`_`f
• `F0af`_`[Attributes`#attributes]`_`f
• `F0af`_`[JavaScript expressions`#javascript-expressions]`_`f
• `F0af`_`[Conditional expressions`#conditional-expressions]`_`f
• `F0af`_`[See also`#see-also]`_`f
• `F0af`_`[References`#references]`_`f
• `F0af`_`[External links`#external-links]`_`f

-─

>>Markup

Below is an example of JSX code:

`B100`F9d9const App = () => {`f`b
`B100`F9d9 return (`f`b
`B100`F9d9 <div>`f`b
`B100`F9d9 <p>Header</p>`f`b
`B100`F9d9 <p>Content</p>`f`b
`B100`F9d9 <p>Footer</p>`f`b
`B100`F9d9 </div>`f`b
`B100`F9d9 );`f`b
`B100`F9d9}`f`b

>>>Nested elements

Multiple elements on the same level need to be wrapped in a single element such as the `B100`F9d9<div>`f`b element shown above, a fragment delineated by `B100`F9d9<Fragment>`f`b or in its shorthand form `B100`F9d9<>`f`b, or returned as an array.`:cite-ref-5[`F5bf`_`[5`#cite-note-5]`_`f]`:cite-ref-6[`F5bf`_`[6`#cite-note-6]`_`f]`:cite-ref-wieruch-3-1[`F5bf`_`[3`#cite-note-wieruch-3]`_`f]

>>>Attributes

JSX provides a range of element attributes designed to mirror those provided by HTML. Custom attributes can also be passed to the component.`:cite-ref-7[`F5bf`_`[7`#cite-note-7]`_`f] All attributes will be received by the component as props.

>>>JavaScript expressions

JavaScript `F33f`_`[expressions`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Expression_(computer_science)]`_`f (but not `F33f`_`[statements`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Statement_(computer_science)]`_`f) can be used inside JSX with curly brackets `B100`F9d9{}`f`b:`:cite-ref-wieruch-3-2[`F5bf`_`[3`#cite-note-wieruch-3]`_`f]

`B100`F9d9<h1>{10+1}</h1>`f`b

The example above will render:

`B100`F9d9<h1>11</h1>`f`b

>>>Conditional expressions

`F33f`_`[If–else statements`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Conditional_(computer_programming)]`_`f cannot be used inside JSX but conditional expressions can be used instead. The example below will render `B100`F9d9{ i === 1 ? 'true' : 'false' }`f`b as the string `B100`F9d9'true'`f`b because `B100`F9d9i`f`b is equal to 1.

`B100`F9d9const App = () => {`f`b
`B100`F9d9 const i = 1;`f`b
`B100`F9d9`f`b
`B100`F9d9 return (`f`b
`B100`F9d9 <div>`f`b
`B100`F9d9 <h1>{ i === 1 ? 'true' : 'false' }</h1>`f`b
`B100`F9d9 </div>`f`b
`B100`F9d9 );`f`b
`B100`F9d9}`f`b

The above will render:

`B100`F9d9<div>`f`b
`B100`F9d9 <h1>true</h1>`f`b
`B100`F9d9</div>`f`b

Functions and JSX can be used in conditionals:`:cite-ref-wieruch-3-3[`F5bf`_`[3`#cite-note-wieruch-3]`_`f]

`B100`F9d9const App = () => {`f`b
`B100`F9d9 const sections = [1, 2, 3];`f`b
`B100`F9d9`f`b
`B100`F9d9 return (`f`b
`B100`F9d9 <div>`f`b
`B100`F9d9 {sections.map((n, i) => (`f`b
`B100`F9d9 /* 'key' is a React-specific attribute for tracking of list items and their changes */`f`b
`B100`F9d9 /* Each 'key' must be unique */`f`b
`B100`F9d9 <div key={"section-" + n}>`f`b
`B100`F9d9 Section {n} {i === 0 && <span>(first)</span>}`f`b
`B100`F9d9 </div>`f`b
`B100`F9d9 ))}`f`b
`B100`F9d9 </div>`f`b
`B100`F9d9 );`f`b
`B100`F9d9}`f`b

The above will render:

`B100`F9d9<div>`f`b
`B100`F9d9 <div>Section 1 <span>(first)</span></div>`f`b
`B100`F9d9 <div>Section 2</div>`f`b
`B100`F9d9 <div>Section 3</div>`f`b
`B100`F9d9</div>`f`b

Code written in JSX requires conversion with a tool such as `F33f`_`[Babel`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Babel_(compiler)]`_`f before it can be understood by web browsers.`:cite-ref-8[`F5bf`_`[8`#cite-note-8]`_`f]`:cite-ref-larsen2021-9-0[`F5bf`_`[9`#cite-note-larsen2021-9]`_`f] This processing is generally performed during a `F33f`_`[software build`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Software_build]`_`f process before the application is `F33f`_`[deployed`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Software_deployment]`_`f.

>>See also

• `F33f`_`[ECMAScript for XML`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=ECMAScript_for_XML]`_`f

>>References

`:cite-note-0-1`!1.`! `F0af`_`[↑`#cite-ref-0-1-0]`_`f "Draft: JSX Specification". `*JSX`*. Facebook. Retrieved 7 April 2018.
`:cite-note-larsen-2`!2.`! `F0af`_`[↑`#cite-ref-larsen-2-0]`_`f `:citereflarsen2021`aLarsen, John (2021). `*React Hooks in Action With Suspense and Concurrent Mode`*. Manning. `F33f`_`[ISBN`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=ISBN_(identifier)]`_`f 978-1720043997.
`:cite-note-wieruch-3`!3.`! `F0af`_`[↑`#cite-ref-wieruch-3-0]`_`f `:citerefwieruch2018`aWieruch, Robin (14 September 2018). `*The Road to React`*. Leanpub. `F33f`_`[ISBN`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=ISBN_(identifier)]`_`f 978-1720043997.
`:cite-note-4`!4.`! `F0af`_`[↑`#cite-ref-4]`_`f "Documentation - JSX". `*www.typescriptlang.org`*. Retrieved 2025-07-13.
`:cite-note-5`!5.`! `F0af`_`[↑`#cite-ref-5]`_`f `:citerefclark2017`aClark, Andrew (September 26, 2017). "React v16.0§New render return types: fragments and strings". `*React Blog`*.
`:cite-note-6`!6.`! `F0af`_`[↑`#cite-ref-6]`_`f "React.Component: render". `*React`*.
`:cite-note-7`!7.`! `F0af`_`[↑`#cite-ref-7]`_`f `:citerefclark2017`aClark, Andrew (September 26, 2017). "React v16.0§Support for custom DOM attributes". `*React Blog`*.
`:cite-note-8`!8.`! `F0af`_`[↑`#cite-ref-8]`_`f `:citereffischer2017`aFischer, Ludovico (2017-09-06). `*React for Real: Front-End Code, Untangled`*. Pragmatic Bookshelf. `F33f`_`[ISBN`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=ISBN_(identifier)]`_`f 9781680504484.
`:cite-note-larsen2021-9`!9.`! `F0af`_`[↑`#cite-ref-larsen2021-9-0]`_`f `:citereflarsen2021`aLarsen, John (2021). `*React Hooks in Action With Suspense and Concurrent Mode`*. Manning. `F33f`_`[ISBN`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=ISBN_(identifier)]`_`f 978-1720043997.

>>External links

• Official website, Draft: JSX specification

`c`F0af`_`[↑ Back to top`#top]`_`f`a